import React, {Component} from 'react'
import { connect } from 'dva';
import Footer from '../components/Footer';
import Indexpage1 from '../components/Indexpage1';
import styles from './IndexPage.css';
import Classsort from './Classsort';
import { Tabs, WhiteSpace ,Badge} from 'antd-mobile';
class IndexPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      indexpage: 0
    }
  }

  componentDidMount() {
  }

  changetab() {
      console.log(123);
  }
  render(){
    console.log(this.props)
    const tabs = [
        {title: <Badge text={'3'}> 推荐 </Badge>},
        {title: <Badge dot> 全部课程 </Badge>}
    ]

    let {nowpage, rolpic,themeinfo,classinfo} = this.props.pagedata;
    let pagedom = <div></div>;
    if (this.state.indexpage === 0)
        pagedom = <Indexpage1
                    rolpicdata = {rolpic}
                    themedata = {themeinfo}
                    classdata = {classinfo}
                  />;
    else 
        pagedom = <Classsort />

    return (
        <div className = {styles.page}>
            <div>
                <Tabs tabs = {tabs}
                    swipeable = {false}
                    usePaged = {false}
                    onChange = {(tabs, index)=>{
                        console.log(index)
                        this.setState({indexpage:index})
                    }}
                >
                </Tabs>
            </div>
            <WhiteSpace size='md' />
            <WhiteSpace size='md' />
            {pagedom}

            <WhiteSpace size='xl' />
            <WhiteSpace size='xl' />
            <WhiteSpace size='xl' />
            <Footer
                wselect = {nowpage}
            />
        </div>
    );
  }
}

IndexPage.propTypes = {
};
function mapStateToProps({pagedata}) {
  return { pagedata }
}
export default connect(mapStateToProps)(IndexPage);
